$archiveTitleCommonColor = #212121
$archiveTitleHoverCommonColor = #ffffff
$archiveTitleLinkCommonColor = black
$archiveTitleTimeCommonColor = #9e9e9e
$archiveTitleTimeHoverCommonColor = #F03838

$archiveTitleDarkColor = #f6f2f5
$archiveTitleHoverDarkColor = #000000
$archiveTitleLinkDarkColor = white
$archiveTitleTimeDarkColor = #8e8e93
$archiveTitleTimeHoverDarkColor = #F03838

article.archive
  padding 0
  margin 2em auto

.archive-post
  text-align left
  margin 2em auto

  .archive-title
    font-size 2.3em
    line-height 1
    position relative
    color $archiveTitleCommonColor
    margin 0

    a
      color $archiveTitleLinkCommonColor

      span
        padding-bottom 3px
        -webkit-transition box-shadow 0.15s
        transition box-shadow 0.15s
        box-shadow inset 0 -2px 0 rgba(240, 56, 56, 0)

      &:hover
        color $archiveTitleCommonColor

        span
          box-shadow inset 0 -2px 0 rgba(240, 56, 56, 0.4)

  time
    font-style italic

    a
      font-size 1.6rem
      color $archiveTitleTimeCommonColor

      &:before
        content '#'
      &:hover
        color $archiveTitleTimeHoverCommonColor

@media (prefers-color-scheme dark)
  .archive-post
    .archive-title
      color $archiveTitleDarkColor

      a
        color $archiveTitleLinkDarkColor

        &:hover
          color $archiveTitleDarkColor

    time
      a
        color $archiveTitleTimeDarkColor

        &:hover
          color $archiveTitleTimeHoverDarkColor

